<template>
  <el-dialog
    v-if="cpm.show"
    title="修改密码"
    :visible.sync="cpm.show"
    width="600px"
    :close-on-click-modal="false"
  >
    <user-info v-if="userInfo" :userInfo="userInfo" />
    <el-form
      :model="cpm.data"
      status-icon
      ref="changePwdForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="新密码" prop="password" verify :rules="[password]">
        <el-input
          type="password"
          v-model="cpm.data.password"
          autocomplete="new-password"
          placeholder="请输入新密码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="确认新密码"
        prop="__password"
        :rules="{
          required: true,
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (value !== cpm.data.password) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          }
        }"
      >
        <el-input
          type="password"
          v-model="cpm.data.__password"
          placeholder="请确认新密码"
          autocomplete="new-password"
          clearable
        ></el-input>
      </el-form-item>
      <p class="tips">
        (新密码需要在12位以上，30位以内，必须包含大小写字母和数字，可包含特殊字符，连续数字或连续字母不超过3位，无连续相同3个字符。)
      </p>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cpm.show = false">
        取 消
      </el-button>
      <el-button type="primary" @click="doChangePwd" :loading="cpm.loading">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import userInfo from './user-info.vue'
import { password } from '@/utils/validate-ruler.js'
export default {
  name: 'change-pwd',
  components: { userInfo },
  data () {
    return {
      password,
      Error,
      cpm: {
        show: false,
        loading: false,
        data: {
          password: '',
          __password: ''
        }
      },
      userInfo: null
    }
  },
  watch: {
    'cpm.show' (n) {
      this.cpm.data = {
        password: '',
        __password: ''
      }
    }
  },
  methods: {
    open (row) {
      this.userInfo = row
      this.cpm.show = true
    },
    doChangePwd () {
      this.cpm.data.userId = this.userInfo.userId
      this.$refs.changePwdForm.validate(valid => {
        if (valid) {
          this.cpm.loading = true
          this.$POST('sot-admin-api/sys/user/resetPassword', this.cpm.data)
            .then(res => {
              this.cpm.loading = false
              if (res.errorCode == '00000') {
                this.$swal.success('修改成功')
                this.cpm.show = false
              } else {
                this.$swal.error(res.message)
              }
            })
            .catch(_ => {
              this.cpm.loading = false
            })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  margin-top: 20px;
}
.qrcode {
  width: 250px;
  margin: 20px auto;
}
.bound {
  text-align: center;
}
.tips {
  padding-left: 100px;
  color: #00c5ea;
}
</style>
